$(function(){

	//加载公共样式
//	  $(".header").load("http://localhost/meixian/html/mxcomtop.html header")
	 $(".footer").load("http://localhost/meixian/html/mxcombot.html footer")
	 
	//获取列表数据  拼接到页面
	 $.ajax({
         type : "get",
         async:false,
         url : "http://localhost/meixian/html/list.json?callback=handle", 
         dataType : "json",
         handle: "jsoncallback",
         //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
         success : function(end){ 
         	console.log(end)
	         	$data = end;
	         	var html = "";  
	            $.each($data,function(index,title,name1,name2,url2,img,price,url){
	            	console.log($data[index].img);
	            	if(index < 17){
	            		html += `<li>
	            					<img class="li-img" src="${$data[index].img}" alt="" />
									<div class="jump">
										<div class="cata-l">
											<img src="${$data[index].url2}" alt="" />
											<i>${$data[index].name1}</i>
										</div>
										<div class="cata-r">
											<img src="${$data[index].url2}" alt="" />
											<i>${$data[index].name2}</i>
										</div>
									</div>																		
									<p>${$data[index].price}</p>
									<span>${$data[index].title}</span>
									<div class="spic">
										<img src="${$data[index].url}" alt="" />
									</div>
								</li>`
	            	}
						$("#list-ul1").html(html);	            	
	            })   
       		}
	})
	 
	//列表页效果
	$("#list-ul1 li").hover(function(){
		$(this).css({
			borderColor:"#1a9733"
		})
		.siblings()
		.css({
			borderColor:"#eee"
		})
		$(".jump").eq($(this).index()).children().css({
			display:"block",
		})
		$(".jump").eq($(this).index()).css({
			background:"#3ca752"
		})
	},function(){
		$(".jump").eq($(this).index()).children().css({
			display:"none"
		})
		$(".jump").eq($(this).index()).css({
			background:"#fff"
		})
	})
	
	//点击li 跳转到详情页
	$("#list-ul1 li").click(function(){
		location.href = "mxdetail.html"
	})
	
	//综合排序选项卡
	$(".title-l li").click(function(){
		$(this).css({
			background:"#fff"
		})
		.siblings()
		.css({
			background:"#fafafc"
		})
	})
})